﻿@page "/scheduler/agenda-view"

@using Syncfusion.Blazor.Schedule
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This demo showcases the agenda view and the configurations available in it.</p>
</SampleDescription>
<ActionDescription>
    <p>
        In this demo, Agenda view is set as active view on Scheduler and made its <code>AllowVirtualScrolling</code> option as false. With this settings, the Agenda view loads the initial data for the next 7 days count from the date value assigned to the
        <code>SelectedDate</code> property of the Scheduler. The initial data loading for 7 days count is due to the default value assigned to the
        <code>AgendaDaysCount</code> property which can be customized as per the user needs.
    </p>
    <p>When the <code>AllowVirtualScrolling</code> property is set to true, the user is allowed to scroll through all the events simply by scrolling up and down upto the last event available in Scheduler. </p>
    <p> By default, the days which doesn't have any events will be hidden on this view, but setting the <code>HideEmptyAgendaDays</code> property to false will allow the <code>No Events</code> text to be displayed against the dates that have no events.</p>
</ActionDescription>

<div class="col-lg-9 control-section">
    <div class="schedule-wrapper">
        <SfSchedule TValue="ScheduleData.AppointmentData" HideEmptyAgendaDays="@HideEmptyAgendaDays" AgendaDaysCount="@AgendaDaysCount" CssClass="ScheduleAgenda" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
            <ScheduleViews>
                <ScheduleView Option="View.Agenda"></ScheduleView>
            </ScheduleViews>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>
<div class="col-lg-3 property-section">
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id='property' title='Properties' class='property-panel-table' style="width: 100%;">
                <tbody>
                    <tr style="height: 50px">
                        <td style="width: 50%">
                            <div>
                                Hide Empty Days
                            </div>
                        </td>
                        <td style="width: 50%;">
                            <div>
                                <SfDropDownList TValue="string" TItem="DropDownData" @bind-Index="@indexDay" DataSource="@DropDownListData">
                                    <DropDownListEvents TValue="string" TItem="DropDownData" ValueChange="OnHideEmptyDaysChange"></DropDownListEvents>
                                    <DropDownListFieldSettings Text="Name" Value="Value"></DropDownListFieldSettings>
                                </SfDropDownList>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 50px">
                        <td style="width: 50%">
                            <div>
                                Days Count
                            </div>
                        </td>
                        <td style="width: 50%;">
                            <div>
                                <SfNumericTextBox TValue="int" Format="n0" @bind-Value="@AgendaDaysCount" Min=1 Max=15></SfNumericTextBox>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

@code{
    private DateTime CurrentDate = new DateTime(2020, 1, 9);
    public List<ScheduleData.AppointmentData> DataSource = new ScheduleData().GetScheduleData();
    public bool HideEmptyAgendaDays = true;
    public int AgendaDaysCount = 7;
    private int? index { get; set; } = 1;
    private int? indexDay { get; set; } = 0;

    public void OnHideEmptyDaysChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args)
    {
        HideEmptyAgendaDays = bool.Parse(args.Value);
    }
    List<DropDownData> DropDownListData = new List<DropDownData>() {
        new DropDownData { Name = "True", Value = "true" },
        new DropDownData { Name = "False", Value = "false" }
    };
    public class DropDownData
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }
}

<style>
    .ScheduleAgenda .e-m-date:hover {
        text-decoration: none !important;
    }
</style>